<template>
    <a-modal title="" :visible="visible" @ok="handleOk" @cancel="handleCancel" class="dir-modal">
        <div v-for="(v, k) in dirList" :key="k">
            {{ v.label }}
        </div>
        <a-button type="dashed" @click="addMovie('openFile')">
            选择文件
        </a-button>
        <a-button type="dashed" @click="addMovie('openDirectory')">
            选择文件夹
        </a-button>
    </a-modal>
</template>
<script>
    export default {
        name: 'DirModal',
        data() {
            return {
                visible: false,
                dirList: [],
            }
        },
        watch: {
            visible(nval) {
                if (nval && this.dirList.length === 0) {
                    const { dirList } = this.$store.state.dir
                    for (const i in dirList) {
                        this.$set(this.dirList, i, dirList[i])
                    }
                }
            },
        },
        methods: {
            setVisible(val) {
                this.visible = val
            },
            handleOk() {
                this.visible = false
            },
            handleCancel() {
                this.visible = false
            },
            addMovie() {},
        },
    }
</script>
<style scoped lang="less">
    .dir-modal {
        /deep/ .ant-btn-dashed {
            width: 100%;
            margin-bottom: 10px;
        }
    }
</style>
